<template>
	<a-tabs :active-key="route.matched[2].path" @change="navigateToRoute" class="navbar-tabs">
<!--		<template v-for="menu in currentMenuList">-->
<!--			<template v-if="!menu.meta.hidden && store.hasPermissions(menu.meta.permissions)">-->
<!--				<a-tab-pane :key="menu.path" @click.stop="navigateToRoute(menu)">-->
<!--					<template #tab>-->
<!--						<span class="navbar-tabs-tab-title">{{ menu.meta.title }}</span>-->
<!--					</template>-->
<!--				</a-tab-pane>-->
<!--			</template>-->
<!--		</template>-->
		<template #rightExtra>
			<!-- 右侧搜索 -->
			<div class="right-search">
				<div id="top_search">
					<!--搜索容器，子应用使用<teleport to="#top_search"></teleport>渲染到此处-->
				</div>
				<a-button type="text" shape="circle" size="large" style="color:white"
						  v-if="qimoorLoaded"
						  @click="openQimoor">
					<template #icon>
						<customer-service-outlined />
					</template>
				</a-button>
				<a-dropdown placement="bottomRight" overlay-class-name="custom-dropdown">
					<a-avatar :src="currentUser.headPortraitUrl">
						<template #icon>
							<user-outlined />
						</template>
					</a-avatar>
					<template #overlay>
						<a-menu class="u-menu">
							<a-menu-item @click="visibles.profile = true">
								<svg-icon icon-class="user" />
								个人资料
							</a-menu-item>
							<a-menu-item @click="signOut">
								<svg-icon icon-class="logout" />
								退出登录
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</div>
		</template>
	</a-tabs>
	<profile-dialog v-model:visible="visibles.profile" />
	<!-- 添加账单 -->
	<bill-add-dialog v-model:visible="visibles.addBill" />
	<!-- 添加房源 -->
	<house-edit-dialog v-model:visible="visibles.houseEdit" :value="currentHouse" />
	<!-- 签约租客合同 -->
	<signing-dialog v-model:visible="visibles.showSignContract" :signing-type="'renter'" />
	<!-- 签约业主合同 -->
	<owner-sign v-model:visible="visibles.showOwnerContract" :contract="{signType: 1}" />
	<!-- <renter-sign-dialog v-model:visible="visibles.showSignContract" /> -->
	<!-- 添加预定 -->
	<add-reserve-dialog v-model:visible="visibles.addReserve" />
</template>
<script lang="ts" setup>
	import {computed, createVNode, onMounted, reactive, ref} from 'vue'
	import {useStore} from '@/store/index'
	import {useRoute, useRouter} from 'vue-router'
	import {PlusOutlined, QuestionCircleOutlined, UserOutlined, CustomerServiceOutlined} from '@ant-design/icons-vue'
	import {Modal} from 'ant-design-vue'
	import ProfileDialog from '@/components/dialog/profile-dialog.vue'
	import HouseEditDialog from '@/components/house/edit/house-edit-dialog.vue'
	import AddReserveDialog from '@/components/contract/add-reserve-dialog/index.vue'
	import {defaultHouse, HouseBase} from '@/interface/house'
	import BillAddDialog from '@/components/finance/dialog/bill-add-dialog.vue'
	import RenterSignDialog from '@/components/contract/tenant/renter-sign-dialog.vue'
	import SigningDialog from '@/components/contract/signing/signing-dialog.vue'
	import OwnerSign from '@/components/contract/signing/owner-sign.vue'

	const store = useStore()
	const route = useRoute()
	const router = useRouter()
	const currentUser = store.currentUser
	const currentHouse = reactive<HouseBase>(defaultHouse())

	console.log(route)

	const visibles = reactive({
		profile: false,
		houseEdit: false,
		houseDetail: false,
		communitySelect: false,
		addNote: false,
		addBill: false,
		addReserve: false,
		showSignContract: false,
		showRetreat: false,
		detailVisible: false,
		showRetreatRent: false,
		showOwnerContract:false
	})

	const navigateToRoute = (path: string) => {
		if (path.startsWith('http')) {
			window.open(path, '_blank')
		} else {
			router.push(path)
		}
	}
	/**
	 * 退出登陆
	 */
	const signOut = () => {
		Modal.confirm({
			title: '系统提示',
			mask: true,
			centered: true,
			icon: createVNode(QuestionCircleOutlined),
			content: '您确定要退出系统吗？',
			async onOk() {
				await store.userLogout()
			}
		})
	}

	// 当前二级路由集合
	const currentMenuList: any = computed(() => {
		return route.matched[1].children
	})

	/**
	 * 添加账单
	 */
	const addBill = () => {
		visibles.addBill = true
	}
	/**
	 * 添加房源
	 */
	const addHouse = () => {
		visibles.houseEdit = true
	}
	/**
	 * 租客合同
	 */
	const renterContract = () => {
		visibles.showSignContract = true
	}
	/**
	 * 添加预定
	 */
	const addReserve = () => {
		visibles.addReserve = true
	}

	const qimoorLoaded = ref<boolean>(false)

	const openQimoor = () => {
		const {qimoChatClick} = window as any
		if (typeof qimoChatClick === 'function') qimoChatClick()
	}

	const initQimoor = () => {
		const env = import.meta.env
		if(!env.VITE_QIMOOR_ACCESSID) return
		const oScript = document.createElement('script')
		oScript.src = `https://webchat.7moor.com/javascripts/7moorInit.js?accessId=${env.VITE_QIMOOR_ACCESSID}&autoShow=false&language=ZHCN`
		oScript.onload = () => {
			qimoorLoaded.value = true
		}
		const s: HTMLElement = document.getElementsByTagName('script')[0]
		s.parentNode?.insertBefore(oScript, s)
	}

	store.searchVisible = false
	onMounted(() => {
		store.searchVisible = true
		!store.isFormWx && initQimoor()
	})
</script>

<style lang="less">
	.navbar-tabs {
		flex:1;
		overflow: hidden;
		height: 100%;

		.ant-tabs-nav {
			height: 100%;
			padding: 0 12px;

			&:before {
				border: none;
			}

			.ant-tabs-nav-wrap {
				margin-left: 12px;
			}

			.navbar-tabs-tab-title {
				color: white;
				height: 60px;
				line-height: 60px;
				font-size: 15px;
				display: inline-block;
			}

			.ant-tabs-nav-more {
				cursor: pointer;
			}
		}

		.right-search {
			height: 100%;
			gap: 12px;
			display: flex;
			min-width: 600px;
			align-items: center;
			color: white;

			#top_search {
				flex: 1;
			}

			.ant-dropdown-trigger {
				cursor: pointer;
			}
		}

		@media (max-width: 1200px) {
			.right-search {
				min-width: 500px;
			}
		}
	}
</style>
